<script setup lang="ts">

</script>

<template>
    <div class="header">
        <div class="con">
            <h2>欢迎来到优医问诊</h2>
            <div class="search">
                <svg-icon svg-name="search"></svg-icon>
                <span> 搜一搜:疾病/症状/医生/健康知识</span>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.header {
    height: 100px;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 90px;
        background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
        border-bottom-left-radius: 150px 20px;
        border-bottom-right-radius: 150px 20px;
    }

    .con {
        position: relative;
        padding: 0 15px;

        h2 {
            color: #fff;
            font-weight: normal;
            font-size: 17px;
            padding: 20px 0;

        }

        .search {
            height: 40px;
            border-radius: 20px;
            box-shadow: 0px 15px 22px -7px rgba(224, 236, 250, 0.8);
            background-color: #fff;
            display: flex;
            align-items: center;
            padding: 0 20px;
            color: var(--cp-dark);
            font-size: 13px;

            .svg-icon {
                font-size: 16px;
                margin-right: 5px;
            }
        }
    }
}
</style>
